<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/grade.css">
    <link rel="stylesheet" href="/css/navBar2.css">
    <script src="/js/grade.js"></script>
    <title>电影排行</title>
    <script type="module">
        import {loadNavbar} from "/js/navBar2.js";
        loadNavbar();
    </script>

</head>
<body>
<div id="navbarContainer"></div>
<div class="container">
<!--    榜单栏-->
    <div class="header">
        <nav>
            <a href="#" class="menu-item" id="total">总榜</a>
            <a href="#" class="menu-item" id="score">高分榜</a>
            <a href="#" class="menu-item" id="weekPopularity">周榜</a>
            <a href="#" class="menu-item" id="monthPopularity">月榜</a>
        </nav>
        <a th:href="getExcelFile" class="menu-item2" id="excelBtn" style="text-decoration: none;color: #ccc;z-index: 4">生成报表</a>
    </div>

    <!--电影展示-->
    <div class="movie-list" id="movieList">
        <!--展示内容-->
        <ul class="movie-list-detail" style="padding-inline-start: 0"></ul>
    </div>
</div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 获取菜单按钮
            const menuButtons = document.querySelectorAll('.menu-item');

            // 添加点击事件监听器
            menuButtons.forEach(button => {
                button.addEventListener('click', async function() {
                    // 发送请求到后端接口
                    const query = this.id; // 获取按钮的 ID
                    const response = await fetch(`/grade/movieList?query=${query}`);
                    const movieGradeList = await response.json();

                    // 在页面上显示电影列表
                    const movieListDetail = document.querySelector('.movie-list-detail');
                    movieListDetail.innerHTML = ''; // 清空列表

                    movieGradeList.forEach(movie => {
                        const listItem = document.createElement('li');
                        listItem.classList.add('movie-item');

                        // 生成电影项的HTML结构
                        let additionalInfo = '';
                        if (query === 'score') {
                            additionalInfo = `
                            <div class="movie-data">
                                <img src="/img/setScore.png">
                                <p>评分: ${movie.score}</p>
                            </div>
                        `;
                        } else if (query === 'weekPopularity') {
                            additionalInfo = `
                            <div class="movie-data">
                                <img src="/img/hot.png">
                                <p>周热度: ${movie.weekPopularity}</p>
                            </div>
                        `;
                        } else if (query === 'monthPopularity') {
                            additionalInfo = `
                            <div class="movie-data">
                                <img src="/img/hot.png">
                                <p>月热度: ${movie.monthPopularity}</p>
                            </div>
                        `;
                        }
                        listItem.innerHTML = `
                            <a href="/player?movieId=${movie.movieId}" style="text-decoration: none;position: relative;display: inline-block">
                                <img src="/img/movie_img/${movie.movieId}.jpg" alt="${movie.movieName}">
                                ${movie.vipRequire ? '<img src="/img/movie_vip.png" alt="VIP" class="vip-icon" style="position: absolute;top: 10px;right: 10px;width: 15px;height: 15px;z-index: 3;">' : ''}
                            </a>
                            <a href="/player?movieId=${movie.movieId}" style="text-decoration: none;">
                                <div class="movie-info">
                                    <div class="movie-title">${movie.movieName}</div>
                                    <div class="movie-type">类型：${movie.movieType}</div>
                                    <div class="movie-area">地区：${movie.movieArea}</div>
                                    <div class="movie-description">简介：${movie.movieIntro}</div>
                                    ${additionalInfo}
                                </div>
                            </a>
                        `;
                        movieListDetail.appendChild(listItem);
                    });
                });
            });

            // menu items selection
            menuButtons.forEach(item => {
                item.addEventListener('click', function() {
                    menuButtons.forEach(item => item.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
            // 默认选中总榜并加载数据
            const totalButton = document.getElementById('total');
            totalButton.classList.add('selected'); // 添加选中样式
            totalButton.click(); // 手动触发点击事件加载数据
        });
    </script>
</body>
</html>
